<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav {
            height: 100px;
            margin: auto;
            display: flex;
            justify-content: flex-start;
            position: relative;
        }

        .logo {
            padding-top: 20px;
            padding-left: 450px;
        }

        .til {
            height: 100px;
            text-align: center;
            line-height: 100px;
            padding: 0 15px;
            margin-left: 10px;
            transition: all .7s ease 0s;

            /* background-color: #174FA4; */
        }

        .nav ul {
            position: relative;
        }

        .til0,
        .til1,
        .til2,
        .til3,
        .til4,
        .til5,
        .til6,
        .til7 {
            background-color: #174FA4;
            position: absolute;
            top: 100px;
            left: 10px;
            width: 150px;
        }

        ol {
            transition: all .7s ease 0s;
        }

        ol li {
            height: 0;
            overflow: hidden;
            transition: all .7s ease 0s;
            color: white;
            line-height: 34px;
        }

        ol li:hover {
            transform: translateX(5px);
            transition: all .2s ease 0s;
        }
    </style>
</head>

<body>

    <div class="nav">
        
    </div>
    <script>
        // ---------------------------------------------------------------------------------------------------------------------
        var data = [ // 创建数组
            {
                title: '首页',
                list: []
            },
            {
                title: '概况',
                list: ['&gt;&emsp;科技馆介绍', '&gt;&emsp;馆内资讯', '&gt;&emsp;通知公告', '&gt;&emsp;预算公开']
            },
            {
                title: '楼层展览',
                list: ['&gt;&emsp;展馆一层', '&gt;&emsp;展馆二层', '&gt;&emsp;展馆三层', '&gt;&emsp;临时展览']
            },
            {
                title: '科普活动',
                list: ['&gt;&emsp;科普大篷车', '&gt;&emsp;科普报告会', '&gt;&emsp;馆校结合', '&gt;&emsp;魅力科学课堂', '&gt;&emsp;科普表演剧', '&gt;&emsp;理论广角', '&gt;&emsp;创客训练营', '&gt;&emsp;数学实验室']
            },
            {
                title: '影院影讯',
                list: ['&gt;&emsp;影院介绍', '&gt;&emsp;列播放场', '&gt;&emsp;影片介绍']
            },
            {
                title: '科普志愿者',
                list: ['&gt;&emsp;志愿者管理办法', '&gt;&emsp;志愿者风采', '&gt;&emsp;网上申请']
            },
            {
                title: '咨询服务',
                list: ['&gt;&emsp;开馆时间', '&gt;&emsp;失物招领', '&gt;&emsp;乘车路线', '&gt;&emsp;参观须知', '&gt;&emsp;联系我们']
            },
            {
                title: '报名入口',
                list: ['&gt;&emsp;资源下载', '&gt;&emsp;科学运动会报名', '&gt;&emsp;科普大篷车报名']
            },
        ]
        // ---------------------------------------------------------------------------------------------------------------------
        // 渲染html
        var str = '';  
        var nav = document.querySelector('.nav');
        for (let i = 0; i < data.length; i++) {
            str += `  
            <ul>
            <p class="til">${data[i].title}</p>
            <ol class="til${i}">`
            var num = data[i].list.length;
            var str1 = '';
            for (let j = 0; j < num; j++) {
                str1 += `<li>${data[i].list[j]}</li>`
            }
            str = str + str1 + '</ol>' + '</ul>';
        }
        nav.innerHTML = '<div class="logo"><img src="http://www.zzkjg.com/images/logo.jpg" alt=""></div>' + str;
// ---------------------------------------------------------------------------------------------------------------------
        var titles = document.querySelectorAll('.til');
        var ols = document.querySelectorAll('ol');
        var qlis = document.querySelectorAll('li');
        // 把行高切换代码打包起来 可以将hg（a）切换成这个内容
        function hg(a) {
            var num2 = ols[a].children.length; // 获取 点击第几个标题就获取标题下面l中的li的个数
            var lis = ols[a].querySelectorAll('li'); // 获取 点击第几个标题就获取标题下面l中的li
            for (let k = 0; k < qlis.length; k++) { // 执行前 清除所有行高 排他
                qlis[k].style.height = '0px';
            }
            for (let j = 0; j < num2; j++) { // 触碰哪个哪个下面的li加高度
                lis[j].style.height = '34px';
            }
        }
// ---------------------------------------------------------------------------------------------------------------------
        for (let i = 0; i < titles.length; i++) {
            titles[i].onmouseover = function () {
                hg(i); // 调用函数
                for (let l = 0; l < titles.length; l++) { // 触碰时的样式 消除
                    titles[l].style.backgroundColor = 'white';
                    titles[l].style.color = '#777777';
                    ols[l].style.padding = '0px 0px';
                }
                titles[i].style.backgroundColor = '#174FA4'; // 触碰时的样式
                titles[i].style.color = 'white';
                ols[i].style.padding = '15px 10px';
                ols[0].style.padding = '0px 0px' // 首页始终没有边距
            }
        }

        for (let i = 0; i < titles.length; i++) {
            titles[i].onmouseleave = function () {
                for (let k = 0; k < qlis.length; k++) { // 鼠标离开时时的样式 消除
                    qlis[k].style.height = '0px';
                }
                titles[i].style.color = 'white';  // 鼠标离开时时的样式
                ols[i].style.padding = '0px 0px';
            }
        }

        for (let i = 0; i < titles.length; i++) { // 鼠标移入下面的列表样式
            ols[i].onmouseover = function () {
                hg(i);
                ols[i].style.padding = '15px 10px'; // 使鼠标移入时高度存在
                ols[0].style.padding = '0px 0px' // 首页始终没有边距
            }
        }

        for (let i = 0; i < titles.length; i++) { // 鼠标移出下面的列表
            ols[i].onmouseleave = function () {
                var num2 = ols[i].children.length;
                var lis = ols[i].querySelectorAll('li');
                for (let j = 0; j < num2; j++) {
                    lis[j].style.height = '0'; // 清空所有行高
                }
                ols[i].style.padding = '0px 0px'; // 清除所有边框
            }
        }

    </script>
</body>

</html>